<template>
	<view class="content">
		<view class="title">
			用户登录
		</view>
		<view class="login">
			<view class="unit">工程建设管理系统</view>
			<tui-form ref="formRef" :show-message="false" :model="formData">
				<tui-form-item asterisk label="账号" prop="loginName">
					<tui-input padding="0" :borderBottom="false" v-model="formData.loginName"
						placeholder="请输入账号"></tui-input>
				</tui-form-item>
				<tui-form-item asterisk label="密码" prop="loginPassword">
					<tui-input :password='true' padding="0" :borderBottom="false" v-model="formData.loginPassword"
						placeholder="密码区分大小写"></tui-input>
				</tui-form-item>
				<tui-form-item prop="verifyCode">
					<view class="code">
						<tui-input padding="0" :borderBottom="false" v-model="formData.verifyCode"
							placeholder="验证码"></tui-input>
						<image class="verifyCode" :src="imageSrc"></image>
					</view>
				</tui-form-item>
				<tui-form-button text="登录" @click="submit"></tui-form-button>
			</tui-form>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed, ref, onMounted } from 'vue';
	import { sysUserLogin, getSelfUserInfo } from '@/apis/userInfo.js'
	import { useStore } from 'vuex'
	const store = useStore()
	// const version = computed(() => store.state.version)
	const formRef = ref(null);
	const captchaUrl = ref('')
	const rules = [{
		name: "loginName",
		rule: ["required"],
		msg: ["请输入账号"]
	}, {
		name: "loginPassword",
		rule: ["required"],
		msg: ["请输入密码"]
	}, {
		name: "verifyCode",
		rule: ["required"],
		msg: ["请输入验证码"]
	}];
	const formData = ref({
		loginName: "",
		loginPassword: "",
		verifyCode: ""
	})
	const imageSrc = computed(() => {
		return `http://192.168.1.127:8086/sys-user/captcha?captchaUrl=${captchaUrl.value}`;
	});
	onMounted(() => {
		let token = uni.getStorageSync('token')
		if (token) {
			uni.navigateTo({
				url: '/pages/index/index'
			})
		}
		getCaptchaUrl()
	})

	//将Date转时间戳
	const getCaptchaUrl = async () => {
		captchaUrl.value = new Date().getTime().toString(); // 示例：将Date转换为时间戳字符串
	}

	//提交表单
	const submit = () => {
		if (formRef.value) {
			formRef.value.validate(formData.value, rules, true).then((res) => {
				if (res.isPass) {
					sysUserLogin(formData.value).then(res => {
						if (res.data.code === 200) {
							// plus.nativeUI.toast("登录成功");
							//保存用户token
							store.commit('setToken', res.data.data.token)
							//保存用户信息
							store.commit('setUserInfo', res.data.data)
							//获取用户当前信息
							getSelfUserInfo().then(res => {
								store.commit('setSelfUserInfo', res.data.data)
							})
							//获取用户设备高度
							uni.getSystemInfo({
								success: function (res) {
									uni.setStorageSync('systemInfo', res)
								},
							});
							uni.navigateTo({ url: '/pages/projectInProgress/projectInProgress' })
						} else {
							plus.nativeUI.toast(res.msg);
							getCaptchaUrl()
						}
					})
				}
			})
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		background-image: url('@/static/login.png');
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10px;

		.title {
			position: absolute;
			font-size: 1.5rem;
			font-weight: bold;
			left: 5%;
			top: 5%;
		}

		.login {
			.unit {
				font-size: 1.5rem;
				font-weight: bold;
				text-align: center;
				margin: 20px;
				color: #1677ff;
				letter-spacing: 5px;
			}

			.code {
				display: flex;
				.verifyCode {
					width: 100px;
					height: 45px;
				}
			}

		}
	}
</style>